<template>
  <div class="search-main">
    <div class="search-header">
      <i class="fa fa-angle-left" @click="fn1"></i>
      <p>搜索</p>
      <div class="sear">
        <input
          class="search-input"
          placeholder="请输入商品名称"
          @mouseover="overtimes"
          @mouseleave="leavetimes"
          v-model="searchword"
        />
        <input class="search-button" value="搜索" type="button" @click="searchenter(searchword)" />
        <i class="fa fa-times" v-if="times"></i>
      </div>
    </div>
    <div class="note" v-if="noteshow">
      <span>搜索记录</span>
      <ul>
        <li v-for="item in arrhostory" :key="item.index">{{item}}</li>
      </ul>
      <p @click="cleanhistory">清除历史记录</p>
    </div>
    <div class="history">
      <ul>
        <li v-for="item in arr" :key="item.id">
          <img class="searchImge" :src="item.image" />
          <br />
          {{item.title}}
          规格:{{item.specifications}}
          <span>￥{{item.market_price}}</span>
          月销:{{item.soldnum}}
          <i class="fa fa-shopping-cart"></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations ,mapActions } from "vuex";
export default {
  data() {
    return {
      times: false,
      searchword: "",
      noteshow: false
    };
  },
  computed: {
    ...mapState(["arr", "arrhostory"])
  },
  methods: {
    fn1() {
      this.$router.go(-1);
      this.$store.state.a = true;
    },
    overtimes() {
      this.times = true;
    },
    leavetimes() {
      this.times = false;
    }, 
    ...mapActions(["searchenter"]),
    ...mapMutations(["cleanhistory"])
   
  },
  mounted() {
    if (this.arrhostory.length === 0) {
      this.noteshow = false;
    } else {
      this.noteshow = true;
    }
  },
  updated() {
    if (this.arrhostory.length === 0) {
      this.noteshow = false;
    } else {
      this.noteshow = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.search-header {
  width: 100%;
  height: 2rem;
  border-bottom: 1px solid #f1f1f1;
  line-height: 1rem;
  .fa-angle-left {
    font-size: 0.6rem;
    color: gray;
    margin-left: 0.2rem;
    display: inline-block;
  }
  p {
    display: inline-block;
    margin-left: 2.8rem;
  }
}
.sear {
  border-radius: 100px;
  border: 1px #ccc solid;
  margin: 0 10px;
  background: #fff;
  height: 30px;
  padding: 0 0 0 5px;
  box-shadow: 1px 1px 5px #ccc inset;
  box-shadow: 1px 1px 1px #fff;
  position: relative;
  .search-input {
    position: absolute;
    top: -2%;
    left: 6%;
    width: 60%;
    border: 0;
    height: 28px;
    font-size: 14px;
  }
  .search-button {
    position: absolute;
    top: 20%;
    right: 10%;
    background: #fff;
    border: none;
  }
  .fa-times {
    position: absolute;
    top: 20%;
    right: 2%;
  }
}
.history {
  width: 100%;
  ul {
    li {
      width: 100%;
      border-bottom: 1px solid #eee;
      padding: 2%;
      box-sizing: border-box;
      overflow: hidden;
      .searchImge {
  width: 20%;
  border-radius: 0.5em;
  display: inline-block;
}
    }
  }
}
.note {
  width: 100%;
  height: 1.5rem;
  background-color: #f2f2f2;
  ul {
    li {
      display: inline;
      margin-left: 0.2rem;
      background-color: #fff;
    }
  }
  p{
    background-color: #fff;
    width: 2rem;
    height:0.5rem;
    margin: 0.1rem 20% 0.1rem 30%;
  }
}

</style>

